<script setup lang="ts">
import { Ref, ref } from "vue";
import type { UploaderAfterRead } from "vant/lib/uploader/types";
import useConsultStore from "@/pinia/modules/consultStore/consultStore.ts";
import { UploaderFileListItem } from "vant";
import { Image } from "@/types/consultTypes/consultTypes.ts";

const consultStore = useConsultStore();

const text: Ref<string> = ref<string>("");

const emits = defineEmits<{
   (eventName: "sendText", text: string): void
   (eventName: "sendImg", img: Image): void
}>();

const props = defineProps<{
   disabled: boolean
}>();

const enter = () => {
   emits("sendText", text.value);
   text.value = "";
};

const afterRead: UploaderAfterRead = async (fileParams: UploaderFileListItem | UploaderFileListItem[]) => {
   if (Array.isArray(fileParams)) return;
   if (!fileParams.file) return;
   const formData: FormData = new FormData();
   formData.append("file", fileParams.file);
   const result: Image = await consultStore.uploadFile(formData);
   emits("sendImg",result)
};

</script>

<template>
   <div class="room-action">
      <van-field type="text" class="input" :border="false" placeholder="问医生" v-model="text" @keyup.enter="enter" :disabled="disabled"></van-field>
      <van-uploader :preview-image="false" :disabled="disabled" :after-read="afterRead">
         <svg-icon svg-name="img"></svg-icon>
      </van-uploader>
   </div>
</template>

<style scoped lang="scss">
.room-action {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 60px;
   background-color: #fff;
   display: flex;
   align-items: center;
   padding: 0 16px;
   z-index: 1;
   box-sizing: border-box;

   .input {
      background-color: var(--cp-bg);
      border: none;
      border-radius: 25px;
      margin-right: 10px;
      padding: 8px 15px;
   }

   .cp-icon {
      width: 24px;
      height: 24px;
   }
}
</style>
